<lv-datatable
  [lvData]="data"
  #lvTable
  lvBordered
  lvMultiGroup
  lvSelectionMode="multiple"
  [lvSelection]="selection"
  (lvSelectionChange)="selectionChange($event)"
  [lvScroll]="{ y: '150px' }"
>
  <ng-template lv-colgroup>
    <colgroup>
      <col />
      <col style="width: 80px" />
      <col style="width: 10%" />
      <col />
      <col />
    </colgroup>
  </ng-template>
  <thead>
    <tr>
      <th rowspan="3" lvShowCheckbox width="40px" [lvRowsData]="lvTable.renderData" (lvCheckChange)="checkAllChange($event)"></th>
      <th colspan="3">Basic Info</th>
      <th>Other Info</th>
    </tr>
    <tr>
      <th rowspan="2" style="padding-left: 8px">Id</th>
      <th colspan="2">Personal Info</th>
      <th rowspan="2">Number</th>
    </tr>
    <tr>
      <th style="padding-left:8px;"><div lvOverflow>This is long long long long Name</div></th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of lvTable.renderData">
      <tr>
        <td width="40px" lvShowCheckbox [lvRowData]="item" [lvDisabled]="item.disabled" (lvCheckChange)="checkOneChange($event)"></td>
        <td>{{ item.id }}</td>
        <td>
          <div lvOverflow>{{ item.name }}</div>
        </td>
        <td>{{ item.age }}</td>
        <td>{{ item.number }}</td>
      </tr>
    </ng-container>
  </tbody>
</lv-datatable>

<div class="aui-help-tips">多行表头当前不支持拖拽，自定义列宽不可和lvResize属性一起使用</div>
